import { memo, useEffect, useState } from 'react'
import { Tabs } from 'antd'
import { FileTextOutlined, SettingOutlined } from '@ant-design/icons'
import ComponentProp from './ComponentProp'
import PageSetting from './PageSetting'
import useGetComponentInfo from '@/hooks/useGetComponentInfo'

enum TAB_KEYS {
  PROP_KEY = 'prop',
  SETTING_KEY = 'setting',
}

const RightPanel = memo(() => {
  const [activeKey, setActiveKye] = useState(TAB_KEYS.PROP_KEY)
  const { selectComponent } = useGetComponentInfo()

  useEffect(() => {
    //当选中组件时,显示 ComponentProp 组件 没选中 显示 PageSetting 页面
    if (selectComponent) {
      setActiveKye(TAB_KEYS.PROP_KEY)
    } else {
      setActiveKye(TAB_KEYS.SETTING_KEY)
    }
  }, [selectComponent])

  const tabItems = [
    {
      key: TAB_KEYS.PROP_KEY,
      label: '属性',
      children: <ComponentProp />,
      icon: <FileTextOutlined />,
    },
    {
      key: TAB_KEYS.SETTING_KEY,
      label: '页面设置',
      children: <PageSetting />,
      icon: <SettingOutlined />,
    },
  ]
  return <Tabs activeKey={activeKey} items={tabItems}></Tabs>
})

export default RightPanel
